<template>
	<view>
		<view class="nav">
			<uni-nav-bar title="我的订单" leftIcon="back" @clickLeft="$tab.back()" :statusBar="true" fixed="false"
				:border="false">
			</uni-nav-bar>
			<view class="bg-FFF">
				<u-tabs :list="type == 1 ? orderStatusList : dikouList" :current="tabIndex" lineColor="#DF2E2C"
					:activeStyle="{
						color: '#DF2E2C',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}" @change="tabChange"></u-tabs>
			</view>
		</view>
		<view :style="{
			height: occupyHeiht + 'px'
		}">

		</view>

		<view class="px-20">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false"
				:emptyImage="'https://file.fulewanjia.com/fulewanjia/profile/preImages/state/img_zanwudigndan.png'">
				<view v-for="(item, index) in list" :key="item.id" class="py-24 px-16 bg-FFF round-12 mt-28"
					@click="getdetail(item)">
					<view class="text-24 flex align-center justify-between" v-show="tabIndex !== 7">
						<view class="">
							订单编号：{{ item.orderNo }}
						</view>
						<view class="text-FF7C01">
							{{ orderstate(item.state) }}
						</view>
					</view>
					<u-divider></u-divider>
					<view class="">
						<view v-for="(i, j) in item.orderSpuList" :key="j" class="p-12" :style="{
							marginTop: index === 0 ? '0' : '20rpx'
						}">
							<!-- 判断如果是有规格的 -->
							<view class="flex items-center" v-if="i.skuInfo">
								<view class="image-200">
									<image class="image-200 round-12" :src="globalConfig.imagePrefix + i.skuInfo.icons"
										mode="">
									</image>
								</view>

								<view class="ml-20 flex flex-col text-32 w-full">
									<text class="u-line-2">{{ i.spuInfo.name }}</text>
									<view class="flex items-center mt-20">
										<!-- <view class="text-gray  text-20" v-if="i.skuInfo.mallSkuSpecs.length > 0">
											{{i.skuInfo.mallSkuSpecs[0].specName}}:{{i.skuInfo.mallSkuSpecs[0].specValue}}
										</view>
										<view class="text-gray  text-20 ml-12" v-if="i.skuInfo.mallSkuSpecs.length > 1">
											{{i.skuInfo.mallSkuSpecs[1].specName}}:{{i.skuInfo.mallSkuSpecs[1].specValue}}
										</view> -->
									</view>
									<view class="flex justify-between mt-48 items-center w-full">
										<view class="text-E2382B">
											￥{{ i.skuInfo.price }}
										</view>
										<view @click.stop="i && goReply(i.id, i.orderId)" v-if="tabIndex == 7"
											class="box_2 text-28 box_3 ml-32">
											去评价
										</view>
									</view>

								</view>
							</view>
							<!-- 没规格的 -->
							<view class="flex items-center" v-else>
								<view class="image-200">
									<image class="image-200 round-12" :src="globalConfig.imagePrefix + i.spuInfo.cover"
										mode="">
									</image>
								</view>

								<view class="ml-20 flex flex-col text-32 w-full">
									<text class="u-line-2">{{ i.spuInfo.name }}</text>
									<view class="flex justify-between mt-48 items-center w-full">
										<view class="text-E2382B">
											￥{{ i.spuInfo.price }}
										</view>
										<view>X {{ i.num }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex align-center mt-16 flex-row-reverse">
						<view v-if="item.state == 0" @click.stop="cancel(item)" class="box_2 text-28 ml-32">
							取消订单
						</view>
						<view @click.stop="getdetail(item, true)" v-if="item.state == 0"
							class="box_2 text-28 box_3 ml-32">
							去付款
						</view>
						<view @click.stop="confirmreceipt(item.orderNo)" v-if="item.state == 2 && type != 2"
							class="box_2 text-28 box_3 ml-32">
							确认收货
						</view>
						<view @click.stop="seelogistics(item.orderNo)"
							v-if="(item.state == 2 || item.state == 3) && type != 2" class="box_2 text-28 ml-32">
							查看物流
						</view>
						<view v-if="item.state == 4" @click.stop="deleteOrder(item.orderNo)"
							class="box_2 text-28 ml-32">
							删除订单
						</view>
					</view>
				</view>
			</s-pull-scroll>
		</view>

		<!-- 物流 -->
		<u-popup :show="isLogistics" @close="isLogistics = false, wlInfo = {}" mode="center" round="16"
			:closeable="true">
			<logistics :wlInfo="wlInfo"></logistics>
		</u-popup>

		<!-- 消费礼包支付 -->
		<u-modal :show="isGift" title="消费礼包" :content='giftContent' :closeOnClickOverlay="true" :showCancelButton="true"
			@close="isGift = false" @cancel="isGift = false" @confirm="isPayPassword = true, isGift = false"></u-modal>

		<!-- 支付密码 -->
		<u-popup :show="isPayPassword" @close="isPayPassword = false, payPassword = ''" mode="center" :round="20">
			<view style="width:650rpx;padding: 48rpx;">
				<view class="pay_title">
					请输入支付密码
				</view>
				<view class="flex justify-between items-center mt-28">
					<u-code-input v-model="payPassword" :adjustPosition="false" :maxlength="6" dot
						:focus="true"></u-code-input>
				</view>
				<view class="mt-28 bg-theme round-12 text-center py-24 text-FFF" @click="giftPay">
					确认
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import logistics from '@/components/xinyu-logistics/xinyu-logistics.vue'
import {
	throttle
} from 'throttle-debounce';
var thro;
export default {
	components: {
		logistics
	},
	data() {
		return {
			orderStatusList: this.$appConfig.orderStatusList,
			dikouList: this.$appConfig.dikouList,
			tabIndex: 0,
			occupyHeiht: 0,
			list: [],
			logistics_show: false,
			wlInfo: {},
			isGift: false, //消费礼包
			giftContent: "",
			giftPayId: null,
			isPayPassword: false,
			payPassword: "",
			isLogistics: false,
			globalConfig: getApp().globalData.config,
			type: null
		};
	},
	onLoad(e) {
		thro = this
		thro.type = e.type
		thro.tabIndex = Number(e.index)
	},
	onShow() {
		thro.refresh()
	},
	onReady() {
		let view = uni.createSelectorQuery().in(this).select(".nav");
		view.fields({
			size: true,
			scrollOffset: true
		}, data => {
			thro.occupyHeiht = data.height
		}).exec();
	},
	methods: {
		giftPay() {
			if (!thro.payPassword || thro.payPassword.length < 6) {
				uni.$u.toast('请输入支付密码')
				return false
			}
			thro.$Api.index.giftOrdersPayment({
				id: thro.giftPayId,
				payPassword: thro.payPassword
			}).then((pay) => {
				thro.payPassword = ''
				thro.isPayPassword = false
				uni.$u.toast(pay.msg)
				thro.refresh()
			})
		},
		getdetail(item) {
			if (this.tabIndex !== 7)
				thro.$tab.nav(`/pages/mine/order/orderDetail?id=${item.orderNo}`)
		},
		deleteOrder: throttle(2000, (id) => {
			thro.$Api.index.appOrdersDelete({
				orderNo: id,
			}).then((res) => {
				uni.$u.toast('删除成功')
				setTimeout(() => {
					thro.refresh()
				}, 1500)
			})
		}, {
			noTrailing: true
		}),
		// 确认收获
		confirmreceipt: throttle(2000, (id) => {
			thro.$Api.index.orderFinished({
				orderNo: id
			}).then(() => {
				uni.$u.toast('收获成功!')
				setTimeout(() => {
					thro.refresh()
				}, 1500)
			})
		}, {
			noTrailing: true
		}),
		// 取消订单
		cancel: throttle(2000, (item) => {
			thro.$Api.index.mallOrderCancel({
				orderNo: item.orderNo,
			}).then((res) => {
				uni.$u.toast('取消成功')
				setTimeout(() => {
					thro.refresh()
				}, 1500)
			})
		}, {
			noTrailing: true
		}),
		seelogistics: throttle(2000, async (orderNo) => {
			const res = await thro.$Api.store.mallOrderLogistics({
				orderNo //订单号
			})
			console.log(res)
			let tem = res.data.data
			let obj = {}
			obj.logo = tem.expressCompanyLogo
			obj.post_name = tem.expressCompanyName
			obj.exp_phone = tem.number
			obj.post_no = res.data.taskNo
			obj.addr = tem.theLastMessage
			obj.list = tem.logisticsTraceDetails.map(i => {
				i.location = i.areaName
				i.context = i.desc
				i.timeArr = [
					uni.$u.timeFormat((new Date(i.time)).getTime(), 'yyyy-mm-dd'),
					uni.$u.timeFormat((new Date(i.time)).getTime(), 'hh:mm:ss')
				]
				return i
			})

			thro.wlInfo = obj
			thro.isLogistics = true
		}, {
			noTrailing: true
		}),
		orderstate(state) {
			let value = ''
			if (thro.type == 1) {
				thro.globalConfig.appConfig.orderStatusList.forEach(item => {
					if (state == item.status) {
						value = item.name
					}
				})
			} else {
				thro.globalConfig.appConfig.dikouList.forEach(item => {
					if (state == item.status) {
						value = item.name
					}
				})
			}
			return value
		},
		refresh() {
			thro.$nextTick(() => {
				thro.$refs.pullScroll.refresh();
			});
		},
		pullDown(pullScroll) {
			setTimeout(() => {
				thro.loadData(pullScroll);
			}, 200);
		},
		loadData(pullScroll) {
			setTimeout(async () => {
				if (pullScroll.page == 1) {
					thro.list = [];
				}
				let form = {
					pageNum: pullScroll.page,
					pageSize: 10,
				}
				if (thro.type == 2) {
					form.columnType = 12
					form.state = thro.dikouList[thro.tabIndex].status
				} else {
					form.state = thro.orderStatusList[thro.tabIndex].status
				}
				let res = {}
				if (form.state !== 6) {
					res = await thro.$Api.index.ordersList(form)
					thro.list = thro.list.concat(res.rows || []);
				} else {
					res = await thro.$Api.index.orderReplyList(form)
					thro.list = [{ orderSpuList: res.rows }];
				}

				if (res.total == 0) {
					pullScroll.empty()
				}

				if (thro.list.length >= res.total) {
					pullScroll.finish();
				} else {
					pullScroll.success();
				}
			}, 100);
		},
		tabChange(e) {
			thro.tabIndex = e.index
			thro.refresh()
		},
		goReply(orderSpuId, orderId) {
			thro.$tab.nav(`/pages/mine/order/commentCon?orderSpuId=${orderSpuId}&orderId=${orderId}`)
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #F8F8F8;
}

.nav {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	width: 100%;
}

.box_2 {
	padding: 16rpx 40rpx;
	border-radius: 8rpx;
	border: 2rpx solid #E6E6E6;
}

.box_3 {
	background: #F68100;
	color: white;
}
</style>